<!-- 历史流量 -->
<template>
  <div class="dashboard-editor-container">
    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <connsearch ref="connsearch" :formOptions="formOptions" @search="search" @reset="reset"/>
      <!-- <div class="tabclick">
        <div class="tabitem" @click="handleClick()">
          <span>显示加速流量趋势<i :class="tab ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></span>
        </div>
      </div> -->
      <el-row>
        <el-col :xs="24" :sm="24" :lg="24">
          <linechart :chart-data="lineChartData"/>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :lg="24">
          <transversechart :chartData="barchartData" title="最近终端流量排名"/>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import { connrequest } from "@/api/firstPage.js"
import connsearch from "@/components/connSearch";
import transversechart from "./components/transversechart.vue"
import linechart from "./components/linechart.vue";
import conntable from "./components/conntable.vue";
import { parseTime } from "@/utils/index.js";
export default {
  components: { connsearch, linechart, transversechart, conntable },
  data() {
    return {
      total: 0, 
      pageNum: 1,
      pageSize: 10,
      tab: false,
      searchform: {},
      tableData: [],
      barchartData: {xAxis:[],series:[]},
      lineChartData: {
        time:[],
        expectedData: [],
        actualData: []
      },
      formOptions:[
        {
          col: 8,
          label: '日期', // label文字
          prop: 'timeRange', // 字段名
          element: 'el-date-picker', // 指定elementui组件
          type: '' // 日期选择类型,
        }
      ]
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    // 默认取60分钟前
    let date = new Date()
    let i = date.getMinutes()
    let StartTime = parseTime(date.setMinutes( i - 60 ),'{y}-{m}-{d} {h}:{i}:{s}')
    let arr = [StartTime, '']
    this.formOptions.map( item => {
      if(item.label === '日期'){
        item.initValue = arr
      }
    })
    this.$set(this.searchform,'timeRange', arr)
    this.getData()
    this.GetShadowStreamSum()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    async GetShadowStreamSum(){
      let xAxis = []
      let series= []
      const data = {
        Filter:{
          StartTime: this.searchform.timeRange?.[0] ||  '',
          EndTime: this.searchform.timeRange?.[1] || '',
          SumCount: 10
        }
      }
      const res = await connrequest('GetShadowStreamSum', data)
      res.Data = res.Data || []
      res.Data.map( item =>{
        xAxis.push(item.Name)
        series.push(item.Count)
      })
      this.barchartData = {xAxis, series}
    },
    async getData(){
      // 默认取60分钟前
      let date = new Date()
      let i = date.getMinutes()
      let StartTime = parseTime(date.setMinutes( i - 60 ),'{y}-{m}-{d} {h}:{i}:{s}')
      let UpByte = []
      let downByte = []
      let time = []
      const data = {
        Paging: {
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
        Filter: {
          StartTime: this.searchform.timeRange?.[0] ||  StartTime,
          EndTime: this.searchform.timeRange?.[1] || '',
          TransDate: '',
          Name: '',
          Descp: ''
        }
      }
      // const res = await connrequest('GetHistorySumStreamLog', data)
      res.Data = res.Data || []
      res.Data = res.Data.map(item => {
        item.TransTime = parseTime(item.TransTime)
        time.push(parseTime(item.TransTime, '{h}:{i}'))
        UpByte.push(item.UpRate)
        downByte.push(item.DownRate)
        return item
      })
      this.lineChartData = {time,UpByte,downByte}
      this.tableData = res.Data
    },
    // 搜索
    search(val) {
      this.searchform = val
      this.getData()
      this.GetShadowStreamSum() 
    },
    // 重置
    reset() {
      // 默认取60分钟前
      let date = new Date()
      let i = date.getMinutes()
      let StartTime = parseTime(date.setMinutes( i - 60 ),'{y}-{m}-{d} {h}:{i}:{s}')
      // let arr = [ parseTime(xTime), parseTime(endTime)]
      let arr = [ StartTime, '']
      this.pageNum = 1
      this.formOptions = this.formOptions.map( item => {
        if(item.label === "日期"){
          item.initValue = arr
        }
        return item
      })
      this.$set(this.searchform,'timeRange', arr)
      this.$refs.connsearch.addInitValue()
      this.getData()
      this.GetShadowStreamSum() 
    },
    handleClick() {
      this.tab = !this.tab
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";
@import "./components/css/conncss.scss";
</style>